import { ProCard } from '@ant-design/pro-components';
import { useState } from 'react';
import { Image, Space, Divider, Flex, Tag ,Card} from 'antd';
import { useModel } from "umi"
import {
  HomeOutlined,
  LinkedinOutlined,
  WechatOutlined,
  EnvironmentOutlined,
  BugOutlined
} from '@ant-design/icons';


const tabListNoTitle = [
  {
    key: 'article',
    label: '《春江花月夜》',
  },
  {
    key: 'app',
    label: '《离骚》',
  },
  {
    key: 'project',
    label: '《虞美人·春花秋月何时了》',
  },
];
const contentListNoTitle = {
  article: <p> 
  春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！<br/>
  江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。<br/>
  江天一色无纤尘，皎皎空中孤月轮。 <span style={{fontWeight: '800',color:'red'}}>江畔何人初见月？江月何年初照人？</span><br/>
  人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。<br/>
  白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？<br/>
  可怜楼上月裴回，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。<br/>
  此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。<br/>
  昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。<br/>
  斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。</p>,
  app: <p>长太息以掩涕兮，哀民生之多艰。
  余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>
  既替余以蕙纕兮，又申之以揽茝。
  <span style={{fontWeight: '800',color:'red'}}>亦余心之所善兮，虽九死其犹未悔。</span><br/>
  怨灵修之浩荡兮，终不察夫民心。
  众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>
  固时俗之工巧兮，偭规矩而改错。
  背绳墨以追曲兮，竞周容以为度。<br/>
  忳郁邑余侘傺兮，吾独穷困乎此时也。
  宁溘死以流亡兮，余不忍为此态也。<br/>
  鸷鸟之不群兮，自前世而固然。<br/><br/>
  何方圜之能周兮，夫孰异道而相安？ 屈心而抑志兮，忍尤而攘诟。<br/>
  伏清白以死直兮，固前圣之所厚。
  悔相道之不察兮，延伫乎吾将反。<br/>
  回朕车以复路兮，及行迷之未远。
  步余马于兰皋兮，驰椒丘且焉止息。<br/>
  进不入以离尤兮，退将复修吾初服。
  制芰荷以为衣兮，集芙蓉以为裳。<br/>
  不吾知其亦已兮，苟余情其信芳。
  高余冠之岌岌兮，长余佩之陆离。<br/>
  芳与泽其杂糅兮，唯昭质其犹未亏。
  忽反顾以游目兮，将往观乎四荒。<br/>
  佩缤纷其繁饰兮，芳菲菲其弥章。
  民生各有所乐兮，余独好修以为常。<br/>
  虽体解吾犹未变兮，岂余心之可惩！</p>,
  project: <p>春花秋月何时了？往事知多少。<span style={{fontWeight: '800',color:'red'}}>小楼昨夜又东风，故国不堪回首月明中。</span><br/>
  雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。<br/></p>,
};

export default () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const userinfo = initialState.currentUser.userinfo
  const [activeTabKey2, setActiveTabKey2] = useState('app');
  const onTab2Change = (key) => {
    setActiveTabKey2(key)
  };
  return (
    <ProCard split="vertical">
      <ProCard colSpan="30%">
        <Space size={12} align='center' style={{ justifyContent: 'center', width: '100%' }}>
          <div style={{ width: '100%', borderRadius: '50%', overflow: 'hidden' }}>
            <Image
              width={150}
              src={initialState.currentUser.avatar}
              placeholder={
                <Image
                  preview={false}
                  src={initialState.currentUser.avatar}
                  width={200}
                />
              }
            />
          </div>
        </Space>
        <Space size={12} align='center' >
          <div style={{ width: '100%', marginTop: '20px' }}>
            <h3 style={{ textAlign: 'center' }}>{userinfo.username}</h3>
            <Divider orientation="left">基础信息</Divider>
            <Flex gap="4px 0" wrap>

              <Tag icon={<EnvironmentOutlined />} color="#cd201f">
                广州
              </Tag>
              <Tag icon={<HomeOutlined />} color="#3b5999">
                贺州
              </Tag>
              <Tag icon={<WechatOutlined />} color="#55acee">
                {userinfo.username + '_vx'}
              </Tag>
              <Tag icon={<LinkedinOutlined />} color="#55acee">
                前端开发
              </Tag>
              <Tag icon={<BugOutlined />} color="#12d26a">
                心态十八岁
              </Tag>
            </Flex>
            <Divider orientation="left">个性标签</Divider>
            <Flex gap="4px 0" wrap>
              <Tag color="magenta">Sing</Tag>
              <Tag color="orange">JAY</Tag>
              <Tag color="red">KTV</Tag>
              <Tag color="lime">React</Tag>
              <Tag color="green">Vue</Tag>
              <Tag color="gold">Python</Tag>
              <Tag color="cyan">Django</Tag>
              <Tag color="volcano">History</Tag>
              <Tag color="magenta"> <a>+ New Tag</a></Tag>
            </Flex>
          </div>
        </Space>
      </ProCard>

      {/* <ProCard title="《春江花月夜》" headerBordered> */}
      <ProCard>
      <Card
        style={{ width: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        // tabBarExtraContent={<a href="#">More</a>}
        onTabChange={onTab2Change}
        tabProps={{
          size: 'large',
        }}
      > 
      <p style={{fontFamily:"宋体"}}>
        {contentListNoTitle[activeTabKey2]}</p>
      </Card>
      </ProCard>
    </ProCard>
  );
};